<template>
	<view class="login">
		<navBar title="阿特拉斯卡友之家" custom-back :show-home="false" @back="toWxLogin" @home="toIndex" :show-back="loginType==2" :marginLeft="loginType==2?'50%':'100%'">
		</navBar>

		<view class="welcome" :style="{marginTop: `${getSystemInfo.navBarHeight}px`}">
			<text>您好</text>
			<text>欢迎使用阿特拉斯卡友之家</text>
		</view>

		<view class="form-body">
			<u--form labelPosition="left" label-width="60px" ref="formRef" :model="formData">
				<!-- 手机号 -->
				<u-form-item label="手机号" prop="phone">
					<u--input class="f-input" type="number" border="bottom" placeholder="请输入手机号" clearable
						v-model="formData.phone" />
				</u-form-item>
				<!-- 验证码 -->
				<u-form-item label="验证码" prop="smsCode">
					<u-input placeholder="请输入验证码" border="bottom" clearable v-model="formData.smsCode">
						<template slot="suffix">
							<u-code ref="uCode" changeText="X秒重新获取" :seconds="seconds" @start="startCode" @end="endCode"
								@change="text => codeBtnText = text">
							</u-code>
							<u-button type="primary" :custom-style="{ height: '32px' }" :text="codeBtnText"
								:disabled="!canGetCode" @click="getCode">
							</u-button>
						</template>
					</u-input>
				</u-form-item>

				<u-form-item label="密码" prop="password" v-if="loginType == 1">
					<u-input placeholder="请输入密码" border="bottom" :password="lockPassword" v-model="formData.password">
						<template slot="suffix">
							<u-icon name="eye-off" :name="lockPassword ? 'eye-off' : 'eye'" color="#666" size="42"
								@click="lockPassword = !lockPassword">
							</u-icon>
						</template>
					</u-input>
				</u-form-item>

				<view class="agreement">
					<view class="pt2">
						<u-checkbox-group size="18px" icon-size="14px" shape="circle" v-model="agree">
							<u-checkbox name="agree"></u-checkbox>
						</u-checkbox-group>
					</view>
					<view>
						我已阅读并同意<text class="a-name" @click="onKyzjServiceProtocol">《卡友之家服务协议》</text>
						和<text class="a-name" @click="onKyzjPrivacyPolicy">《卡友之家隐私政策》</text>
					</view>
				</view>

				<u-button type="primary" text="登录" :disabled="loading || agree[0] !== 'agree'" @click="onLogin">
				</u-button>
			</u--form>

			<view class="text-links">
				<text @click="toPasswordLogin" v-if="loginType==2">密码登录</text>
				<text v-else></text>
				<text @click="toForgotPassword">忘记密码</text>
			</view>
		</view>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import loginMixin from '@/mixins/login'
	import smsCodeMixin from '@/mixins/smsCode'
	import navBar from '@/components/navBar.vue'
	import {
		mapGetters
	} from 'vuex'

	export default {
		mixins: [loginMixin, smsCodeMixin],
		components: {
			navBar
		},
		data() {
			return {
				formData: {
					phone: '',
					smsCode: '',
					password: ''
				},
				// 密码可见
				lockPassword: true,
				// 提交中
				loading: false,


				// 是否同意
				agree: [],

				// 验证规则
				rules: {
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					smsCode: [{
						required: true,
						message: '请输入短信验证码',
					}],
					password: [{
						required: true,
						message: '请输入密码',
					}]
				},
				loginType: 2,
        pageDeviceId: '9a90dc90-9e9b-7119-71b1-c26903fa80ab'
			}
		},
		computed: {
			...mapGetters('global', ['getSystemInfo']),
		},
		methods: {
			// 登录
			async onLogin() {
				if (this.loading) return
				await this.$refs.formRef.validate()
				try {
					this.loading = true
					// const { deviceId } = this
					
					// 添加第三方渠道登录信息
					const params = {}
					if(uni.getStorageSync('AppLaunchQuery')){
						const AppLaunchQuery = uni.getStorageSync('AppLaunchQuery')
						params.wxMaChannel = AppLaunchQuery.channel
					}
					
					if (this.loginType == 2) {
						let obj = {
							phone: this.formData.phone,
							smsCode: this.formData.smsCode,
						}
						await this.loginForPhone({
							...obj,
							deviceId: this.pageDeviceId,
							tenantId: 'miniapp',
							...params
						})
					} else {
						await this.loginForPhoneAndPwd({
								deviceId: this.pageDeviceId,
								isTerminalLogin: false,
								mobile: this.formData.phone,
								password: this.formData.password,
								smsCode: this.formData.smsCode,
								...params
							})
					}

					await this.getUserInfoFn()
					this.toIndex()
					uni.$emit('refreshIndex', 'login')
				} catch (err) {
					this.$refs.uToast.show({
						message: err.respMsg || '登录失败',
						position: 'top'
					})
				} finally {
					this.loading = false
				}
			},
			async getLoginType() {
				const res = await this.$request({
					url: '/user-center/loginPageConfig/getType',
					method: 'GET',
					data: {
						client: 4
					}
				})
				this.loginType = res.datas.type ? res.datas.type : 2
			},
			// 获取短信验证码接口
			async getCodeApi() {
				// const {
				// 	deviceId
				// } = this
				const {
					phone
				} = this.formData
				return this.$request({
					url: '/api-uaa/common/validata/smsCode',
					data: {
						deviceId: this.pageDeviceId,
						phone
					}
				})
			}
		},
		onLoad(params) {
			if (params && params.phone) {
				this.formData.phone = params.phone
			}
			this.getLoginType()
		},
		onReady() {
			this.$refs.formRef.setRules(this.rules)
		},
		// 分享
		onShareAppMessage() {
			return {
				title: '阿特拉斯卡友之家',
			}
		},
		onShareTimeline() {
			return {
				title: '阿特拉斯卡友之家',
			}
		},
	}
</script>

<style scoped lang="scss">
	.login {
		padding: 140rpx 65rpx 0;
		height: 100vh;
		background: #fff;
		display: flex;
		box-sizing: border-box;
		flex-direction: column;

		/deep/ .nav-bar {
			.action {
				right: 7px;
			}

			.a-title {
				position: absolute;
				transform: translateX(-50%);
			}
		}

		.welcome {
			display: flex;
			flex-direction: column;
			font-size: 48rpx;
			line-height: 2;
		}

		.agreement {
			display: flex;
			flex-direction: row;
			font-size: 14px;
			line-height: 1.5;
			margin: 20rpx 0 50rpx;

			.a-name {
				color: $uni-primary;
			}
		}

		.text-links {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			font-size: 14px;
			margin-top: 45rpx;
		}
	}
</style>